<template>
    <FadeIn>
      <el-aside>
          <el-row style="height: 100px" align="middle" id="test" v-if="!isCollapse" class="logo">
            <el-col span="10" :offset=2 >
              <Logo width="70"></Logo>
            </el-col>
            <el-col span="11" :offset=1 v-if="test">
              <span style="color: #93b3d7">在线学习平台<br />后台管理系统</span>
            </el-col>
          </el-row>
        <el-row style="height: 100px" align="middle" v-show="isCollapse" justify="center" class="logo">
          <el-col>
            <Logo width="50" style="margin-left: 5px"></Logo>
          </el-col>
        </el-row>
        <el-row style="height: auto;min-height: 100%">
          <el-col>
            <Menu></Menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header height="100px">
          <Header></Header>
        </el-header>
        <el-main><router-view /></el-main>
        <el-footer><Footer></Footer></el-footer>
      </el-container>
    </FadeIn>
</template>
<script>
import FadeIn from "@/components/transition/FadeIn";
import Menu from "@/components/adminHome/Menu";
import Header from "@/components/adminHome/Header";
import Logo from "@/components/Logo";
export default {
  name: "AdminPage",
  components: {Logo, Header, Menu, FadeIn},
}
</script>
<script setup>
import {useStore} from 'vuex'
import {computed,ref,watch} from "vue";
import Footer from "@/components/adminHome/Footer";
let test = ref(true);
const store = useStore()
const isCollapse = computed( () => store.state.isCollapse )
watch(()=>isCollapse.value,(oldValue)=>{
  if (!oldValue) {
    setTimeout(function () {
      test.value = true;
    },280)
  } else {
    test.value = false;
  }
})
</script>
<style scoped>
.el-aside{
  /*background-color: #334154;*/
  width: auto;
}

.el-header{
  padding: 0px;
}
#test:not(.el-menu--collapse){

}
.logo{
  background-color: #364152;
}
</style>